From 030fe796552ced317fbed30b86db3141279908d9 Mon Sep 17 00:00:00 2001
From: Kit La Touche <kit@transneptune.net>
Date: Mon, 11 Nov 2024 21:55:47 -0500
Subject: Fix error in invite

We weren't awaiting data.invite, so were trying to operate on the
promise itself.
---
 ui/routes/(login)/invite/[invite]/+page.svelte | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'ui/routes/(login)/invite/[invite]/+page.svelte')

diff --git a/ui/routes/(login)/invite/[invite]/+page.svelte b/ui/routes/(login)/invite/[invite]/+page.svelte
index 18bf437..3685997 100644
--- a/ui/routes/(login)/invite/[invite]/+page.svelte
+++ b/ui/routes/(login)/invite/[invite]/+page.svelte
@@ -14,7 +14,8 @@
   async function onSubmit(event) {
     event.preventDefault();
     pending = true;
-    const response = await acceptInvite(data.invite.id, username, password);
+    let invite = await data.invite;
+    const response = await acceptInvite(invite.id, username, password);
     if (200 <= response.status && response.status < 300) {
       username = '';
       password = '';
-- 
cgit v1.2.3


From 16ec9ef2e1e53b5cc2a3fd86c123e39371d00c2b Mon Sep 17 00:00:00 2001
From: Kit La Touche <kit@transneptune.net>
Date: Sun, 5 Jan 2025 14:44:31 -0500
Subject: Stylize more better

---
 ui/app.css                                     |  6 ++++++
 ui/app.html                                    |  2 +-
 ui/lib/components/Invite.svelte                |  2 +-
 ui/lib/components/Invites.svelte               |  2 +-
 ui/routes/(app)/+layout.svelte                 |  4 ----
 ui/routes/(app)/me/+page.svelte                |  2 ++
 ui/routes/(login)/invite/[invite]/+page.svelte |  4 ++--
 ui/styles/forms.css                            |  2 ++
 ui/styles/invites.css                          | 11 +++++++++++
 ui/styles/messages.css                         |  6 ++++++
 ui/styles/sidebar.css                          |  4 ++++
 ui/styles/variables.css                        |  1 +
 12 files changed, 37 insertions(+), 9 deletions(-)
 create mode 100644 ui/styles/invites.css

(limited to 'ui/routes/(login)/invite/[invite]/+page.svelte')

diff --git a/ui/app.css b/ui/app.css
index 7ac9237..27086e7 100644
--- a/ui/app.css
+++ b/ui/app.css
@@ -8,9 +8,15 @@
 @import url("styles/messages.css");
 @import url("styles/textarea.css");
 @import url("styles/forms.css");
+@import url("styles/invites.css");
 
 body {
   background-color: var(--colour-active-channel-bg);
+  color: var(--dark-text);
+}
+
+hr {
+  width: 90%;
 }
 
 /* TODO:
diff --git a/ui/app.html b/ui/app.html
index 942e328..e6be518 100644
--- a/ui/app.html
+++ b/ui/app.html
@@ -8,6 +8,6 @@
     %sveltekit.head%
   </head>
   <body data-sveltekit-preload-data="hover">
-    <div class="m-0 p-0 h-vh w-full">%sveltekit.body%</div>
+    <div>%sveltekit.body%</div>
   </body>
 </html>
diff --git a/ui/lib/components/Invite.svelte b/ui/lib/components/Invite.svelte
index 9e6e469..29631f4 100644
--- a/ui/lib/components/Invite.svelte
+++ b/ui/lib/components/Invite.svelte
@@ -10,4 +10,4 @@
 </script>
 
 <button use:copy={{ text: inviteUrl }}>copy</button>
-<span>{inviteUrl}</span>
+<span class="invite-url-literal">{inviteUrl}</span>
diff --git a/ui/lib/components/Invites.svelte b/ui/lib/components/Invites.svelte
index 5c5d601..7861448 100644
--- a/ui/lib/components/Invites.svelte
+++ b/ui/lib/components/Invites.svelte
@@ -17,7 +17,7 @@
   <button type="submit">create invitation</button>
 </form>
 
-<ul>
+<ul class="invite-list">
   {#each invites as invite}
     <li><Invite id={invite.id} /></li>
   {/each}
diff --git a/ui/routes/(app)/+layout.svelte b/ui/routes/(app)/+layout.svelte
index cacfc2d..08444bd 100644
--- a/ui/routes/(app)/+layout.svelte
+++ b/ui/routes/(app)/+layout.svelte
@@ -129,10 +129,6 @@
   <div id="interface">
     <nav id="sidebar" data-expanded={pageContext.showMenu}>
         <ChannelList active={channel} channels={enrichedChannels} />
-        <!--
-      <div class="channel-list">
-      </div>
-        -->
       <div class="create-channel">
         <CreateChannelForm />
       </div>
diff --git a/ui/routes/(app)/me/+page.svelte b/ui/routes/(app)/me/+page.svelte
index 9718ce1..14a9db8 100644
--- a/ui/routes/(app)/me/+page.svelte
+++ b/ui/routes/(app)/me/+page.svelte
@@ -5,5 +5,7 @@
 </script>
 
 <ChangePassword />
+<hr />
 <Invites />
+<hr />
 <LogOut />
diff --git a/ui/routes/(login)/invite/[invite]/+page.svelte b/ui/routes/(login)/invite/[invite]/+page.svelte
index 4433bd6..132cbc1 100644
--- a/ui/routes/(login)/invite/[invite]/+page.svelte
+++ b/ui/routes/(login)/invite/[invite]/+page.svelte
@@ -25,11 +25,11 @@
 </script>
 
 {#await data.invite}
-  <div class="card m-4 p-4">
+  <div class="invite-text">
     <p>Loading invitation…</p>
   </div>
 {:then invite}
-  <div class="card m-4 p-4">
+  <div class="invite-text">
     <p>Hi there! {invite.issuer} invites you to the conversation.</p>
   </div>
   <LogIn {disabled} bind:username bind:password onsubmit={(event) => onSubmit(event, invite.id)} />
diff --git a/ui/styles/forms.css b/ui/styles/forms.css
index aaae92c..0ab9b77 100644
--- a/ui/styles/forms.css
+++ b/ui/styles/forms.css
@@ -1,6 +1,7 @@
 label {
   display: block;
   padding: 0.25rem;
+  font-style: italic;
 }
 
 label input {
@@ -16,4 +17,5 @@ form > button {
   padding: 0.25rem;
   border-radius: 0.25rem;
   border: 1px solid var(--colour-input-border);
+  margin: 0.25rem;
 }
diff --git a/ui/styles/invites.css b/ui/styles/invites.css
new file mode 100644
index 0000000..9cd3fd4
--- /dev/null
+++ b/ui/styles/invites.css
@@ -0,0 +1,11 @@
+.invite-list {
+  padding: 0.25rem;
+}
+
+.invite-url-literal {
+  font-family: monospace;
+}
+
+.invite-text {
+  margin: 1rem;
+}
diff --git a/ui/styles/messages.css b/ui/styles/messages.css
index ba659ed..0854d17 100644
--- a/ui/styles/messages.css
+++ b/ui/styles/messages.css
@@ -6,6 +6,7 @@
   box-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.5);
   width: 95%;
   clear: both;
+  overflow: hidden;
 }
 
 .own-message {
@@ -30,6 +31,11 @@
 .message-run > .username {
   background-color: var(--colour-message-run-username-bg);
   color: var(--colour-message-run-username-text);
+  display: inline-block;
+  border-bottom-right-radius: 0.25rem;
+  padding: 0.25rem;
+  border-bottom: 1px solid var(--colour-message-run-username-border);
+  border-right: 1px solid var(--colour-message-run-username-border);
 }
 
 .message {
diff --git a/ui/styles/sidebar.css b/ui/styles/sidebar.css
index 8808a3b..b10789f 100644
--- a/ui/styles/sidebar.css
+++ b/ui/styles/sidebar.css
@@ -23,6 +23,10 @@
 }
 
 /* create channel form */
+.create-channel {
+  padding-left: 0.5rem;
+}
+
 .create-channel form {
   display: flex;
   flex-direction: row;
diff --git a/ui/styles/variables.css b/ui/styles/variables.css
index 9a1c689..f753589 100644
--- a/ui/styles/variables.css
+++ b/ui/styles/variables.css
@@ -48,6 +48,7 @@
   --colour-message-run-other-text: var(--light-text);
 
   --colour-message-run-username-bg: color-mix(in srgb, var(--colour-base) 70%, white);
+  --colour-message-run-username-border: color-mix(in srgb, var(--colour-base) 50%, black);
   --colour-message-run-username-text: color-mix(in srgb, var(--colour-base) 50%, black);
 
   /* Message */
-- 
cgit v1.2.3

